<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>材料数据库-首页</title>
		<link rel="stylesheet" type="text/css" href="css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			.useRightNow{
				width: 200px;
				height: 45px;
				border: 1px solid #32C37C;
				font-size: 14px;
				font-weight: 700;
				color: #32C37C;
				background-color: #fff;
				margin-top: 30px;
			}
			.index .step1Right{
			    margin-top: 20px;
			    background: initial;
			}
			.index .step1Title{
				font-size: 55px;
			}
			.index .step2Left{
			    margin-top: 40px;
			    background: initial;
			}
			.index .step3Right{
			    margin-top: 70px;
			    background: initial;
			}
			.index .step4Left {
			    margin-top: 80px;
			    background: initial;
			}
		</style>
	</head>
	<body>
		<div class="index">
			<!--模块头部 start-->
			<div class="indexHead">
				<div class="loginHeadContent">
					<div class="fl">
						<a href="javascript:void(0);"><img src="img/indexLogo.png" class="houseLogo"/></a>
					</div>
					<div class="fr">
						<div class="aGroup">
							<a class="loginMenu" href="javascript:void(0);">项目圈</a>
							<a class="loginMenu" href="javascript:void(0);">材料数据库</a>
							<a class="loginMenu" href="javascript:void(0);">计算工具</a>
							<div class="clear"></div>
						</div>
						<div class="btnGroup">
							<a class="btn" href="javascript:void(0);">注册</a>
							<a class="btn" href="javascript:void(0);">登录</a>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<!--模块尾部 end-->
			
			<!--banner头部 start-->
			<div class="banner">
				<div class="bannerContent">
					<div class="bannerText">
						<div class="bannerTitle">共享材料数据库</div>
						<div class="bannerDec mt30">
							<p>广泛测定当前市场建材家具污染特性，建设面向全社会的材料环保性能开放数据库，</p>
							<p>为用户提供透明可靠的材料信息</p>
						</div>
						<button class="useRightNow">立即使用</button>
					</div>
					<div class="bannerLogo">
						<img src="img/banner03.png"/>
					</div>
					<div class="clear"></div>
				</div>
				<!--<div id="canvas-cont">
				  	<canvas class="waterwave-canvas"style="height: 390px !important;width: 100% !important;"></canvas>
				</div>-->
				<img src="img/indexWave.png" class="bannerAnimation"/>
			</div>
			<!--banner尾部 end-->
			
			<!--step1 start-->
			<div class="step1">
				<div class="step1Content">
					<div class="step1Left">
						<img src="img/mStep1.png" class="wid100"/>
					</div>
					<div class="step1Right">
						<div class="step1Title">公共材料数据共享</div>
						<div class="step1Dec">
							<p>基于国家行业标准的污染释放率分级，提供涵盖装修工程</p>
							<p>常用装饰装修材料及部品类型的污染释放水平，查看不同</p>
							<p>品牌材料详细环保性能数据，便于用户快速比较、挑选目</p>
							<p>标材料</p>
						</div>
					</div>
				</div>
			</div>
			<!--step1 end-->
			
			<!--step2 start-->
			<div class="step2">
				<div class="step2Content">
					<div class="step2Left">
						<div class="step1Title">企业专属单元定制</div>
						<div class="step1Dec">
							<p>打造企业专属的个性化装修材料管理单元，实现专有材料</p>
							<p>动态管控，划定内部产品质量统一标准，分享企业成员优</p>
							<p>质材料资源，沉淀项目成功应用模板，精确支撑企业精品</p>
							<p>业务产品</p>
						</div>
					</div>
					<div class="step2Right">
						<img src="img/mStep2.png" class="wid100"/>
					</div>
				</div>
			</div>
			<!--step2 end-->
			
			<!--step3 start-->
			<div class="step1">
				<div class="step1Content">
					<div class="step1Left">
						<img src="img/mStep3.png" class="wid100"/>
					</div>
					<div class="step3Right">
						<div class="step1Title">材料特性参数提取</div>
						<div class="step1Dec">
							<p>提供材料污染性能参数通用计算工具，规范不同渠道数据</p>
							<p>格式，提供多方参与数据建设通道</p>
						</div>
					</div>
				</div>
			</div>
			<!--step3 end-->
			
			<!--step4 start-->
			<div class="step2">
				<div class="step2Content">
					<div class="step4Left">
						<div class="step1Title">数据统计应用</div>
						<div class="step1Dec">
							<p>基于多维度数据统计挖据，分析产品质量分布、助力优质</p>
							<p>品牌宣传、跟踪行业环保发展趋势，促进绿色材料开发</p>
						</div>
					</div>
					<div class="step2Right">
						<img src="img/mStep4.png" class="wid100"/>
					</div>
				</div>
			</div>
			<!--step4 end-->
			
			<!--footer start-->
			<div class="footer">
				<div class="footerContent">
					<div class="footerLeft">Copyright © 2008 - 2017 深圳市建筑科学研究院 All Rights Reserved</div>
					<div class="footerRight">
						<a class="" href="javascript:void(0);">常见问题</a>
						<a class="" href="javascript:void(0);">联系我们</a>
						<a class="" href="javascript:void(0);">关于我们</a>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<!--footer end-->
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<!--<script type="text/javascript" src="js/jquery.waterwave.js"></script>
	<script type="text/javascript">
		$(function(){
		    var box = $(".waterwave-canvas").waterwave({
		        direction: 'up',
		       	background: 'img/indexWave.png',
		    });
		});
	</script>-->
</html>
